<template>
    <div>
    
        <cu-navbar :is-back="false">
            <block slot="content">订货区</block>
        </cu-navbar>
        <view class="jingpai-page page">
            <div class="swiper-list">
                <u-swiper
                    :list="swiperList"
                    previousMargin="30"
                    nextMargin="30"
                    indicator
                    effect3d
                    indicatorMode="line"
                    circular
                    showTitle
                    radius="5"
                    bgColor="#ffffff"
                ></u-swiper>
            </div>
        
            <div class="grid f-r a-c j-b">
                <div class="grid-item f-c a-c j-c" @click="toOrder(6)">
                    <u-image src="/static/icon1.png" width="100rpx" height="100rpx"></u-image>
                    <div class="name">全部</div>
                </div>
                <div class="grid-item f-c a-c j-c"  @click="toOrder(0)">
                    <u-image src="/static/icon2.png" width="100rpx" height="100rpx"></u-image>
                    <div class="name">付款确认</div>
                </div>
                <div class="grid-item f-c a-c j-c"  @click="toOrder(1)">
                    <u-image src="/static/icon3.png" width="100rpx" height="100rpx"></u-image>
                    <div class="name">收款确认</div>
                </div>
                <div class="grid-item f-c a-c j-c"  @click="toOrder(2)">
                    <u-image src="/static/icon4.png" width="100rpx" height="100rpx"></u-image>
                    <div class="name">委托代卖</div>
                </div>
            </div>
            <div class="active_img" @click="toYuyue">
                <u-image src="/static/icon5.png" width="100%" height="160rpx"></u-image>
            </div>
            <u-gap height="20rpx" bgColor="#f3f3f3"></u-gap>
            <div class="tabs">
                <u-tabs  active-color="#FF2E26" inactive-color='#888' :current="currentIndex" :list="tabsList" @change="clickTab"></u-tabs>
            </div>
            <div class="list">
                <u-empty
                    v-if="!productlist.length"
                    mode="list"
                />
                <u-row gutter="10">
                    <u-col span="4" v-for="(item,index) in productlist" :key="index">
                        <div class="item" @click="toDetail(item)">
                            <div class="name">{{ item.name }}</div>
                            <div class="date">{{ item.date }}</div>
                        </div>
                    </u-col>
                </u-row>
            </div>
        </view>
    </div>
</template>

<script>
	export default {
		data() {
			return {
				swiperList: [],
				tabsList: [
					{ name: '利铭利众商城' },
				],
				list: [],
          currentIndex: 0,
          productlist: []
			}
		},
		onShow() {
			this.$api.bannerList().then(res => {
				this.swiperList = res.result.map((el,index) => {
					return {
              id: index,
						title: el.name,
              image: el.imageurl,
						type: 'image'
					}
				})
			})
        this.getList()
		},
		methods: {
			clickTab(e) {
            this.currentIndex = e
            this.getList()
			},
        getList() {
            this.$api.jingpai_list(this.currentIndex).then(res => {
                try  {
                    this.productlist = res.result.map(el => {
                        return {
                            shop_id: el.shop_id,
                            name: el.companyName,
                            date: el.opentime,
                        }
                    })
                }
                catch (e) {
                    console.log(e)
                }
            })
        },
			toDetail(row) {
				this.$common.navigateTo('/pages/jingpai-detail/jingpai-detail?name=' + row.name + '&date=' + row.date  + '&shopId=' + row.shop_id )
			},
			toOrder(type) {
				this.$common.navigateTo('/pages/order-list/order-list?type=' + type )
			},
			toYuyue() {
				this.$common.navigateTo('/pages/yuyue/yuyue' )
			}
		}
	}
</script>

<style lang="scss">
.jingpai-page {
	height: 100%;
	background-color: #f3f3f3;
	.list {
		padding: 20rpx;
		.item {
        margin-bottom: 6px;
			width: 100%;
			text-align: center;
			border-radius: 4px;
			background-color: #fff;
			.name {
				font-size: 32rpx;
				font-weight: 400;
				color: #333;
				padding: 16rpx 0;
			}
			.date {
				padding-bottom: 10rpx;
				color: #ff443b;
				font-size: 24rpx;
			}
		}
	}
	.swiper-list {
		padding:  30rpx 0;
		background-color: #fff;
	}
	.active_img {
		padding: 10rpx 30rpx;
	}
	.grid {
		background-color: #fff;
		padding:30rpx 50rpx;
		.grid-item {
			width: 150rpx;
			.name {
				margin-top: 20rpx;
			}
		}
	}
	.tabs {
		width: 100%;
		background-color: #fff;
		
		.u-tabs__wrapper__nav__item  {
			flex: 1 !important;
		}
	}
}
</style>
